<template>
	<view class="technician-view">
		<!-- <an-nav-bar title="技师" :isback="false"> </an-nav-bar> -->
		<!-- <view class="nav-bar">
			<view class="title">技师</view>
			<view class="ipt flex">
				<uni-icons type="search" color="#929292" size="16"></uni-icons>
				<input type="text" placeholder="搜索">
			</view>
			<view class="bottom-block"></view>
		</view>
		<view style="height:calc(var(--status-bar-height) + 280rpx) ;"></view> -->
		<!-- <sortFilter ref="sortFilter" :shopList="shopList" @serviceItem="serviceItem" @onSort="onSort">
			<template :slot="'whereCnt'">
				
			</template>
		</sortFilter> -->


		<view class="status-bar_fixed"></view>
		<view class="status-bar_fixedh"></view>
		
		<view class="flex2 tabs-title1">
			<view class="flex-1"></view>
			<view class="flex-1"></view>
			<view class="flex-1 cell" :class="{'current':tabbarId == 1}" @click="onTab(1)">按摩</view>
			<view class="flex-1 cell" :class="{'current':tabbarId == 2}" @click="onTab(2)">健身</view>
			<view class="flex-1"></view>
			<view class="flex-1"></view>
		</view>
		<view class="tabs-title1h"></view>

		<view class="sort-filter flex">
			<view class="left flex">
				<view @click="sortFilter=!sortFilter;serviceFilter=false;whereFilter=false;">
					<text>{{sortText}}</text>
					<text class="iconfont icon-caret-down"></text>
					<view class="filter-box" :class="{'active-filter-box':sortFilter}"
						@touchmove.stop.prevent="moveHandle">
						<view class="filter-cnt">
							<view :class="{'check-text':orderByColumn == text.orderByColumn}"
								@click.stop="onSort(text.orderByColumn,text.isAsc)" v-for="(text,idx) in sortList"
								:key="idx">
								{{text.text}}
							</view>
						</view>
					</view>
				</view>
				<view @click="sortFilter=false;serviceFilter=!serviceFilter;whereFilter=false;">
					<text>服务商</text>
					<text class="iconfont icon-caret-down"></text>
					<view class="filter-box" :class="{'active-filter-box':serviceFilter}"
						@touchmove.stop.prevent="moveHandle">
						<view class="service-cnt">
							<scroll-view class="scroll-view" scroll-y="true">
								<view class="scroll-view-item " :class="{'item-check':item.check}"
									v-for="(item,index) in shopList" :key="index"
									@click.stop="item.check = !item.check">
									<text>{{item.storeName}}</text>
								</view>
							</scroll-view>
							<view class="btn flex">
								<view @click.stop="serviceItem(1)">重置</view>
								<view @click.stop="serviceItem(2)">确认</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="right" @click="sortFilter=false;serviceFilter=false;whereFilter=!whereFilter;">
				<text>筛选</text>
				<text class="iconfont icon-shaixuan"></text>
				<view class="filter-box" :class="{'active-filter-box':whereFilter}"
					@touchmove.stop.prevent="moveHandle">
					<view class="where-cnt">
						<view class="sort-where">
							<view class="line" v-for="(item,idx) in whereList" :key="idx">
								<view class="title">{{item.title}}</view>
								<view class="lbls">
									<view :class="{'check': lab.check }" v-for="(lab,index) in item.labs" :key="index"
										@click.stop="whereLabs(item,lab)">
										{{lab.text}}
									</view>
								</view>
							</view>
							<view class="btns flex_center">
								<button @click.stop="whereReset">重置</button>
								<button @click.stop="confirmWhere">确定</button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 96rpx;"></view>
		
		<uni-notice-bar v-if="!form.latitude && !form.longitude" show-icon text="未开启手机GPS定位，无法计算你与技师的距离" />
		
		<view class="technician-list" v-show="technicianList.length">
			<!-- <technicianCard :list="technicianList" @goto="goto" /> -->
			<view class="item flex" v-for="item in technicianList" :key="item.id"  @click="goto(item)">
				<view class="img ">
					<image v-if="item.headImg" class="head-img" :src="imgUrl+item.headImg" mode=""></image>
					<view class="tag">今日可约</view>
				</view>
				<view class="cnt">
					<view class="top flex">
						<view class="name flex">
							<text class="left">{{item.nickName}}</text>
							<text class="right">{{item.jobTitle}}</text>
						</view>
						<view class="lac flex">
							<uni-icons type="location-filled" color="#666" size="14"></uni-icons>
							{{$common.distance(item.distance)}}
						</view>
					</view>
					<view class="certificate_order">
						<view class="flex">
							<view class="t_certificate flex iconfont">资质认证</view>
							<view class="">最近接单{{item.totalOrder||0}}单</view>
						</view>
						<view style="padding: 10rpx 0; color: #999;">{{item.personLabel}}</view>
						<view class="t_store flex iconfont">
							<view class="">{{item.storeName}}</view>
						</view>
					</view>
				</view>
				<view class="btn">
					<button>点击预约</button>
				</view>
			</view>
		</view>
		<view class="technician-list" v-show="!technicianList.length">
			<view class="null-box">
				<image src="/static/null.png" mode=""></image>
				<view class="">列表为空</view>
			</view>
		</view>
	</view>
</template>

<script>
	import indexConfig from '@/config/index.config';
	import technicianCard from "../../components/technicianCard.vue"
	// import sortFilter from "../../components/sortFilter.vue"
	export default {
		components: {
			technicianCard,
			// sortFilter
		},
		data() {
			return {
				tabbarId:1,
				imgUrl: indexConfig.imgUrl,
				isSearch: false,
				sortFilter: false,
				serviceFilter: false,
				whereFilter: false,
				orderByColumn: "",
				sortList: [{
					text: '综合排序',
					orderByColumn: '',
					isAsc: ''
				}, {
					text: '订单最多',
					orderByColumn: 't.total_order desc, t.id',
					isAsc: 'desc'
				}, {
					text: '距离最近',
					orderByColumn: 't.distance, t.id',
					isAsc: 'desc'
				}, {
					text: '最近加入',
					orderByColumn: 't.create_time desc, t.id',
					isAsc: 'desc'
				}, {
					text: '评分最高',
					orderByColumn: 't.score desc, t.id',
					isAsc: 'desc'
				}],
				whereList: [{
					title: '特色标签',
					multiple: true,
					labs: [{
							text: '必点专区',
							key: "mustStatus",
							check: false
						},
						{
							text: '靠谱专区',
							key: "reliableStatus",
							check: false
						}
					]
				}, {
					title: '资质认证',
					multiple: true,
					labs: [{
							text: '头像认证',
							key: "isHeadAuth",
							check: false
						},
						{
							text: '实名认证',
							key: "isAuth",
							check: false
						}
					]
				}, {
					title: '性别',
					multiple: false,
					key: "sex",
					labs: [{
							text: '男性技师',
							val: "1",
							check: false
						},
						{
							text: '女性技师',
							val: "0",
							check: false
						}
					]
				}, {
					title: '评价',
					multiple: false,
					key: "score",
					labs: [{
							text: '3.5分以上',
							val: "3.5",
							check: false
						},
						{
							text: '4.0分以上',
							val: "4.0",
							check: false
						},
						{
							text: '4.5分以上',
							val: "4.5",
							check: false
						}
					]
				}],
				isSearch: false,
				sortFilter: false,
				serviceFilter: false,
				whereFilter: false,
				technicianList: [],
				shopList: [],
				form: {
					pageNum: 1,
					pageSize: 10,
					storeId: '',
					accountType: 1,
					status: 1,
					orderByColumn: "",
					isAsc: "",
					redStatus: '',
					reliableStatus: '',
					isHeadAuth: '',
					isAuth: '',
					sex: "",
					score: "",
					latitude: "",
					longitude: "",
				},
				haveNext:true,
			};
		},
		computed: {
			sortText() {
				let arr = this.sortList.filter(item => item.orderByColumn == this.orderByColumn)
				return arr[0].text
			}
		},
		onLoad() {

		},
		onShow() {
			this.whereReset()
			this.getList()
			
			this.$http.get('/appNoAuth/store/massageTechnician/listStore', {
				accountType: 2,
				status: 1,
			}).then(res => {
				this.shopList = res.rows.map(val => {
					return {
						...val,
						check: false
					}
				})
			})
		},
		methods: {
			onTab(id) {
				this.tabbarId = id

				this.whereReset()
				this.getList()
			},
			onSort(t1, t2) {
				this.orderByColumn = t1
				this.form = {
					...this.form,
					orderByColumn: t1,
					isAsc: t2
				}
				this.getList()
				this.sortFilter = false
			},
			serviceItem(idx) {
				if (idx == 1) {
					this.$emit('serviceItem', '')
				} else {
					let arr = this.shopList.filter(val => val.check)
					arr = arr.map(item => {
						return item.accountId
					})
					if (arr.length == 0) {
						this.shopList.forEach(item => {
							item.check = false
						})
					}
					this.form.pageNum = 1
					this.form.storeIds = arr.join(',')
					this.getList()
				}
				this.serviceFilter = false
			},
			moveHandle() {
				return true
			},
			whereReset() {
				let {
					location
				} = this.$mStore.state
				this.form.latitude=location.latitude
				this.form.longitude=location.longitude
				
				this.form.jobTitle = this.tabbarId==2?'健身':'按摩'
				
				this.form.pageNum = 1
				this.form.pageSize = 10
				this.form.redStatus = ''
				this.form.reliableStatus = ''
				this.form.isHeadAuth = ''
				this.form.isAuth = ''
				this.form.sex = ""
				this.form.score = ""
				this.whereList.forEach(val => {
					val.labs.forEach(i => {
						i.check = false
					})
				})
				this.whereFilter = false
			},
			confirmWhere() {
				this.getList()
				this.whereFilter = false
			},
			whereLabs(item, labs) {
				if (item.multiple) {
					labs.check = !labs.check
					if (this.form[labs.key]) {
						this.form[labs.key] = ''
					} else {
						this.form[labs.key] = true
					}
				} else {
					item.labs.forEach(i => {
						i.check = false
					})
					labs.check = !labs.check
					if (labs.check) {
						this.form[item.key] = labs.val
					} else {
						this.form[item.key] = ''
					}
				}
			},
			goto(item) {
				uni.navigateTo({
					url: '/pages/technicianDetail/technicianDetail?id=' + item.id
				})
			},
			getList() {
				this.$http.get('/appNoAuth/store/massageTechnician/list', this.form).then(res => {
					if (this.form.pageNum == 1) {
						this.technicianList = []
					}
					
					if (res && res.rows && res.rows.length) {
						this.technicianList = this.technicianList.concat(res.rows)
						this.form.pageNum++
					} else {
						this.haveNext=false
					}
				})
			}
		},
		onReachBottom() {
			if (this.haveNext) {
				this.getList()
			}
		},
	}
</script>
<style>
page {
	background-color:  #ffffff;
}
</style>
<style lang="scss" scoped>
	@import '@/static/iconfont/iconfont.css';
	.nav {
		width: 100%;
		height: calc(var(--status-bar-height) + 88rpx);
		position: fixed;
		left: 0;
		top: 0;
		background: #f5f5f5;
		z-index: 999;
		box-sizing: border-box;
		padding-top: var(--status-bar-height);

		.tabbar {
			width: 224rpx;
			height: 88rpx;
			margin: 0 auto;
			font-size: 36rpx;
			font-weight: 700;
			text-align: LEFT;
			color: #9e9e9e;
			line-height: 88rpx;
		}

		.active-tabbar {
			color: #333333;
			position: relative;

			&::after {
				content: "";
				width: 60rpx;
				height: 6rpx;
				background: linear-gradient(276deg, #aa8050 0%, #d7b075 100%);
				border-radius: 4rpx;
				position: absolute;
				bottom: 8rpx;
				left: 50%;
				transform: translateX(-50%);
			}
		}
	}

	.sort-filter {
		width: 100%;
		height: 88rpx;
		left: 0;
		position: fixed;
		box-sizing: border-box;
		padding: 0 50rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #929292;
		line-height: 40rpx;
		z-index: 99999;
		background-color: #fff;

		.filter-box {
			width: 100vw;
			height: 0px;
			overflow: hidden;
			top: 78rpx;
			left: 0;
			background-color: rgba(#333, .4);
			position: absolute;
			z-index: 9;
			transition: all .5s;

			.service-cnt {
				width: 100%;
				height: 50vh;
				background-color: #ffffff;
				box-sizing: border-box;
				padding: 10px 0 0;

				.btn {
					width: 100%;
					height: 88rpx;
					border-top: 2rpx solid #eee;

					>view {
						flex: 1;
						text-align: center;
						line-height: 88rpx;
						height: 88rpx;
						font-size: 24rpx;

						&:last-child {
							background-color: #aa8050;
							color: #fff;
						}
					}
				}

				.scroll-view {
					width: 100%;
					height: calc(50vh - 108rpx);
					flex-wrap: wrap;
					text-align: left;
					padding: 0 20rpx;
					box-sizing: border-box;

					.scroll-view-item {
						display: inline-block;
						width: calc(33.3% - 16rpx);
						height: 50rpx;
						line-height: 50rpx;
						background: #f8f8f8 url(/static/icon_store_chk.png) no-repeat 20rpx 50%;
						background-size: 36rpx auto;
						margin-right: 19rpx;
						padding-left: 34px;
						color: #666;
						font-size: 24rpx;
						box-sizing: border-box;
						border-radius: 6rpx;

						text {
							display: block;
							flex: 1;
							height: 50rpx;
							word-break: keep-all;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							padding-right: 16rpx;
						}

						&:nth-child(3n + 3) {
							margin-right: 0rpx;
						}
					}

					.item-check {
						background: #eee6dc url(/static/icon_store_chked.png) no-repeat 20rpx 50%;
						background-size: 36rpx auto;
						color: #aa8050;
					}
				}
			}

			.filter-cnt {
				width: 100%;
				background-color: #fff;

				>view {
					text-align: left;
					width: 100%;
					height: 80rpx;
					line-height: 80rpx;
					color: #666;
					font-size: 24rpx;
					overflow: hidden;
					position: relative;
					box-sizing: border-box;
					padding: 0 30rpx;
					border-bottom: 2rpx solid #f8f8f8;
				}

				.check-text {
					color: #aa8050;
				}
			}
		}

		.active-filter-box {
			height: calc(100vh - var(--status-bar-height) - 384rpx) !important;
		}

		.left {
			flex: 1;
			justify-content: space-between;
			margin-right: 150rpx;
		}

		.right {
			height: 40rpx;
			padding-left: 28rpx;
			border-left: 2rpx solid #DBDBDB;

			.where-cnt {
				margin-left: 20%;
				width: 80%;
				height: 100%;
				background-color: #fff;
			}
		}
	}

	.nav-bar {
		width: 100%;
		height: calc(var(--status-bar-height) + 206rpx);
		background: linear-gradient(90deg, #d7b075, #aa8050);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99999;
		padding-top: var(--status-bar-height);
		box-sizing: border-box;

		.bottom-block {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 12rpx;
			border-radius: 12rpx 12rpx 0 0;
			background-color: #fff;
		}

		.title {
			height: 80rpx;
			color: #333333;
			font-size: 36rpx;
			font-weight: 700;
			line-height: 80rpx;
			text-align: center;
		}

		.ipt {
			width: 694rpx;
			height: 70rpx;
			background: #f5f5f5;
			border-radius: 36rpx;
			margin: 20rpx auto;
			box-sizing: border-box;
			padding: 0 22rpx;

			input {
				height: 60rpx;
				font-size: 28rpx;
				font-weight: 500;
				text-align: LEFT;
				color: #929292;
				line-height: 60rpx;
				flex: 1;
				margin-left: 16rpx;
			}
		}
	}

	.sort-where {
		width: 100%;
		height: 100%;
		padding: 0 20rpx;
		box-sizing: border-box;

		.btns {
			padding: 30rpx 0 45rpx;
			width: 100%;

			button {
				height: 80rpx;
				background: #f6f6f6;
				border-radius: 40rpx;
				color: #666;
				font-size: 30rpx;
				margin: 0;
				line-height: 80rpx;

				&::after {
					border: none;
				}

				&:first-child {
					width: 180rpx;
					background: #f6f6f6;
					color: #666;
					margin: 0;
				}

				&:last-child {
					color: #fff;
					width: 350rpx;
					background: #aa8050;
					margin-left: 20rpx;
				}
			}
		}

		.line {
			.title {
				padding: 30rpx 0 20rpx !important;
				font-size: 28rpx;
				text-align: left;
				line-height: 30rpx;
			}

			.lbls {
				display: flex;
				padding-bottom: 30rpx;

				>view {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 140rpx;
					height: 80rpx;
					background: #f6f6f6;
					border-radius: 10rpx;
					box-sizing: border-box;
					text-align: center;
					color: #666;
					font-size: 26rpx;
					margin-right: 20rpx;
					position: relative;
					white-space: nowrap;
				}
			}

			.check {
				color: #aa8050;
				background: #fdebff;
				border: 2rpx solid #aa8050;
			}
		}
	}

	.flex {
		display: flex !important;
		align-items: center !important;
	}

	.technician-list {
		padding: 0 28rpx;

		.item {
			padding: 32rpx 0;
			border-bottom: 2rpx solid #f5f5f5;
			position: relative;

			.cnt {
				flex: 1;
				height: 200rpx;
				margin-left: 28rpx;


				.certificate_order {
					font-size: 11px;
					font-weight: 400;
					color: #666;

					>view {
						height: 34rpx;
						line-height: 34rpx;
					}

					.t_store {
						color: #666;
						font-size: 24rpx;
						margin-top: 6rpx;

						&::before {
							content: '';
							width: 28rpx;
							height: 28rpx;
							background: url(/static/shop-icon.png) no-repeat;
							background-size: 100% auto;
							margin-right: 2px;
						}

						&::after {
							content: '\e65f';
							font-weight: bold;
							font-size: 20rpx;

						}

						&:first-child {
							margin-bottom: 20rpx;
						}
					}

					.t_certificate {
						font-size: 24rpx;
						font-weight: 400;
						color: #666;
						margin-right: 30rpx;

						&::before {
							content: '';
							width: 28rpx;
							height: 28rpx;
							background: url(/static/certification.png) no-repeat;
							background-size: 100% auto;
							margin-right: 2px;
						}

						&::after {
							content: '\e65f';
							font-weight: bold;
							font-size: 20rpx;

						}
					}
				}

				.top {
					margin-top: 6rpx;
					width: 100%;
					height: 40rpx;
					margin-bottom: 20rpx;

					.name {
						flex: 1;

						.left {
							height: 40rpx;
							font-size: 28rpx;
							font-weight: 500;
							color: #000000;
							line-height: 40rpx;
						}

						.right {
							margin-left: 14rpx;
							display: inline-block;
							width: 60rpx;
							height: 32rpx;
							background: #ff638e;
							border-radius: 4rpx;
							font-size: 20rpx;
							font-weight: 500;
							color: #ffffff;
							line-height: 32rpx;
							text-align: center;
						}
					}
				}

				.lac {
					height: 24rpx;
					font-size: 24rpx;
					font-weight: 500;
					color: #929292;
					line-height: 24rpx;
				}
			}
			
			
			.btn {
				position: absolute;
				bottom: 28rpx;
				right: 10rpx;
	
				button {
					width: 140rpx;
					height: 60rpx;
					margin: 0 !important;
					background: linear-gradient(292deg, #d7b075 0%, #ffd68e 100%);
					border-radius: 8rpx;
					box-shadow: 0px 8rpx 12rpx 0px rgba(215, 176, 117, 0.25);
					font-size: 24rpx;
					font-weight: 700;
					color: #333333;
					line-height: 60rpx;
					padding: 0;
			
					&::after {
						border: none;
			
					}
				}
			}

			.img {
				width: 200rpx;
				height: 200rpx;
				border: 2rpx solid #ffd68e;
				border-radius: 50%;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;

				.tag {
					position: absolute;
					bottom: -8rpx;
					width: 112rpx;
					height: 32rpx;
					background: #26cba6;
					border-radius: 4rpx;
					left: 50%;
					transform: translateX(-50%);
					font-size: 20rpx;
					font-weight: 500;
					text-align: center;
					color: #ffffff;
					line-height: 32rpx;
				}

				image {
					width: 180rpx;
					height: 180rpx;
					border-radius: 50%;
				}
			}
		}
	}
</style>
